<template>
    <div>
        <h3>App</h3>
        <Child>
            <template v-slot:user>
                <p>userName:{{ info.userName }}</p>
                <p>age:{{ info.age }}</p>
            </template>

            <template>
                <p slot="user2">userName:{{ info.userName }}</p>
                <p>age:{{ info.age }}</p>
            </template>
        </Child>

<!--        <Child :todos="todos">-->
<!--            <template v-slot:default="slotProps">-->
<!--                {{slotProps.todo.text}} {{slotProps.todo.id}}-->
<!--            </template>-->
<!--        </Child>        -->

<!--        <Child :todos="todos">-->
<!--            <template v-slot="slotProps">-->
<!--                {{slotProps.todo.text}} {{slotProps.todo.id}}-->
<!--            </template>-->
<!--        </Child>        -->

        <Child :todos="todos">
            <template #default="slotProps">
                {{slotProps.todo.text}} {{slotProps.todo.id}}
            </template>
        </Child>
    </div>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
    name: "App",
    components: {Child},
    data() {
        return {
            info: {
                userName: "张三",
                age: 34
            },
            todos: [
                {id: 1, text: 'vue', done: true},
                {id: 2, text: 'react', done: false},
                {id: 3, text: 'angular', done: false},
            ]
        }
    },
    methods: {
        addNum() {
            this.num++
        }
    },
}
</script>